<template>
  <div>
    <van-index-bar>
      <div v-for="(v, i) in list" :key="i">
        <van-index-anchor :index="v.word" />
        <van-cell :icon="item.CoverPhoto" v-for="(item, i) in v.children" :key="i" :title="item.Name" @click="toDetail(item.MasterID, item.Name)"/>
      </div>
    </van-index-bar>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "select-car",
  data() {
    return {
      list: [],
    };
  },
  methods: {
    async getData() {
      const resp = await axios.get(
        "http://baojia.chelun.com/v2-car-getMasterBrandList.html"
      );
      resp.data.data.map((v) => {
        const result = this.list.find((item) => {
          return item.word === v.Spelling[0];
        });

        if (result) {
          result.children.push(v);
        } else {
          this.list.push({
            word: v.Spelling[0],
            children: [v],
          });
        }
      });
    },
		toDetail(id, name) {
			this.$router.push(`/detail/${id}/car/${name}`)
		}
  },
  created() {
    this.getData();
  },
};
</script>